﻿@page "/components/highlighter"

<DocsPage>
    <DocsPageHeader Title="Highlighter">
        <Description>
            Use this utility component to highlight parts of the text.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>The highlighter cand be used in combination with any other component.</Description>
            </SectionHeader>
            <SectionSubGroups>
                <DocsPageSection>
                    <SectionHeader Title="MudList">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="HighlighterWithListExample" ShowCode="false">
                        <HighlighterWithListExample />
                    </SectionContent>
                </DocsPageSection>
                <DocsPageSection>
                    <SectionHeader Title="MudTable">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="HighlighterWithTableExample" ShowCode="false">
                        <HighlighterWithTableExample/>
                    </SectionContent>
                </DocsPageSection>
            </SectionSubGroups>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Style">
                <Description>Style it with the Class or Style properties:</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="HighlighterWithCustomStyleExample" ShowCode="false">
                <HighlighterWithCustomStyleExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Case sensitivity">
                <Description>Set the <code class="docs-code docs-code-primary">UntilNextBoundary</code> property to true if you want to highlight the text until the next regex boundary occurs, or the <code class="docs-code docs-code-primary">CaseSensitive</code> property to decide if you want to perform a case-sensitive highlight.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="HighlighterUntilNextBoundaryExample" ShowCode="false">
                <HighlighterUntilNextBoundaryExample />
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
